var React = require('react')
var ListItem = React.createClass({
    getInitialState () {
        return {
            chooseAll: false,
            chooseNone: true
        }
    },

    // 删除一个item
    handerDelte (index) {
        this.props.todoList.splice(index, 1)
        this.props.delItem( this.props.todoList)
    },

    // 全部删除
    handerDeleteAll () {
        console.log('111111111111111')
    },

    // 全选
    handerChooseState () {
        this.setState ({
            chooseAll: true,
            chooseNone: false
        })
        let arr = []
        this.props.todoList.forEach( (val) => {
            arr.push({
                value: val.value,
                isCheck: true
            })
        })
        this.props.chooseAll(arr)
    },

    // 全不选
    handerChooseNoneState () {
        this.setState ({
            chooseNone: true,
            chooseAll: false
        })
        let arr = []
        this.props.todoList.forEach( (val) => {
            arr.push({
                value: val.value,
                isCheck: false
            })
        })
        this.props.chooseAll(arr)
    },

    // 点击选择单个item
    chooseItem (index) {
        this.props.todoList[index].isCheck = !this.props.todoList[index].isCheck
        this.props.chooseItem(this.props.todoList)
        let isAllChecked = false
        let isAllNoneChecked = false

        // 监听选择单个item的变化
        if (this.props.todoList.every(item => item.isCheck)) {
            isAllChecked = true
        }
        if (this.props.todoList.every(item => !item.isCheck)) {
            isAllNoneChecked = true
        }
        this.setState({
            chooseNone: isAllNoneChecked,
            chooseAll: isAllChecked
        })
        
    },
    render () {
        var display = this.props.todoList.length > 0 ? 'block' : 'none'
        return (
            <div>
               <ul>
                   {
                     this.props.todoList.map((item, index) => {
                        return (
                          <li  key={index}>
                              <input type="checkbox" checked={item.isCheck} onChange={ () => this.chooseItem(index)}/>
                              {index+1}、{item.value}
                              <span style={{marginLeft: '20px', color: 'red', display: 'inline-block', cursor: 'pointer'}} onClick={()=> {this.handerDelte(index)}}>删除</span>
                         </li>
                        )
                      })
                   }
               </ul>
               <p style={{display: display}}>
                    <input type="checkbox" checked={this.state.chooseAll} onChange={this.handerChooseState}/>全选
                    {/*<span style={{marginLeft: '20px', color: 'red', display: 'inline-block', cursor: 'pointer'}} onClick={this.handerDeleteAll}>删除</span>*/}
                     <input type="checkbox" checked={this.state.chooseNone} onChange={this.handerChooseNoneState}/>全不选
               </p>
            </div>
        )
    }
})
module.exports = ListItem